<template>
  <div class="app-main">
    <div class="search-box">
      <el-form :inline="true" size="mini" :model="listParams" ref="searchForm">
        <search-form-box :show-more-btn="false">
          <template slot="showSearch">
            <el-form-item label="供应商名称：" prop="supplier_name">
              <el-input v-model="listParams.supplier_name" placeholder="请输入供应商名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="材质名称：" prop="material_texture_name">
              <el-input v-model="listParams.material_texture_name" placeholder="请输入材质名称" clearable></el-input>
            </el-form-item>
          </template>
          <template slot="searchBtn">
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
          </template>
        </search-form-box>
      </el-form>
    </div>
    <div class="table-box">
      <el-table :data="tableData" size="mini" border style="width: 100%" v-loading="tableLoading">
        <el-table-column type="index" label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span>{{ (listParams.page - 1) * listParams.page_size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="supplier_name" label="供应商名称" min-width="400" align="center"></el-table-column>
        <el-table-column prop="material_texture_name" label="材质名称" width="200" align="center"></el-table-column>
        <el-table-column prop="price" label="单价(/平米)" width="200" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="remove(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination :current-page="listParams.page" :page-sizes="[10,20,50,100,200,400]"
      layout="total, sizes, prev, pager, next, jumper" :page-size="listParams.page_size" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange">
    </el-pagination>
    <!--录入物料信息-->
    <el-dialog :title="is_edit?'编辑物料信息':'新增物料信息'" :visible.sync="dialogVisible" width="30%" center @close="closeDialog">
      <el-form :model="supplierMaterialModel" class="" ref="supplierMaterialForm" v-loading="dialogLoading"
        label-position="right" label-width="100px" :rules="supplierMaterialFromRules">
        <el-form-item label="材质" prop="material_texture_id">
          <el-select v-model="supplierMaterialModel.material_texture_id" filterable style="width: 100%" clearable
            placeholder="请选择材质">
            <el-option v-for="(item,index) in materialTextureList" :key="index" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input v-model.trim="supplierMaterialModel.price" placeholder="请输入单价" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo()">保&nbsp;存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import SearchFormBox from '@/components/SearchFormBox'
  import { list, edit, remove } from '@/api/supplier/supplier_material'
  import { list_all3rd_bycode } from '@/api/business/setting/dict'
  import { Message } from 'element-ui';

  export default {
    name: 'SupplierMaterialBuy',
    components: { SearchFormBox },
    data() {
      return {
        listParams: {
          supplier_name: null,
          material_texture_name: null,
          page: 1,
          page_size: 10
        },
        tableData: [],
        tableLoading: false,
        total: null,
        dialogVisible: false,
        dialogLoading: false,
        supplierMaterialModel: {
          id: null,
          supplier_id: null,
          material_texture_id: null,
          price: null
        },
        supplierMaterialFromRules: {
          material_texture_id: [
            { required: true, message: '请选择材质', trigger: 'change' }
          ],
          price: [
            { required: true, message: '请输入单价', trigger: 'blur' },
            { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: "请输入合法数字(支持2位小数)", trigger: "blur" }
          ]
        },
        materialTextureList: [],
        is_edit: false
      }
    },
    created() {
      this.getDictMaterialTexture()
      this.getList()
    },
    methods: {
      handleSizeChange(val) {
        this.listParams.page_size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listParams.page = val
        this.getList()
      },
      goodsHandleSizeChange(val) {
        this.goodsListParams.page_size = val
        this.getGoodsList()
      },
      goodsHandleCurrentChange(val) {
        this.goodsListParams.page = val
        this.getGoodsList()
      },
      getDictMaterialTexture() {
        list_all3rd_bycode({ code: 'dwxg-hmsx' }).then(res => {
          this.materialTextureList = res.data
        })
      },
      getList() {
        this.tableLoading = true
        list(this.listParams).then(res => {
          const { code, data, message } = res
          if (code == 200) {
            this.tableData = data.records
            this.total = data.total
          }
          this.tableLoading = false
        }).catch(() => {
          this.tableLoading = false
        })
      },
      search() {
        this.getList()
      },
      edit(row) {
        this.dialogVisible = true
        this.dialogLoading = false
        this.supplierMaterialModel = Object.assign({}, row)
        console.log(this.supplierMaterialModel, row)
        this.is_edit = true
        this.$nextTick(() => {
          this.$refs['supplierMaterialForm'].clearValidate()
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
        this.getList()
      },
      showAdd() {
        this.dialogVisible = true
        this.$nextTick(() => {
          this.$refs['supplierMaterialForm'].clearValidate()
        })
      },
      saveInfo() {
        if (this.dialogLoading) return false
        this.$refs['supplierMaterialForm'].validate((valid) => {
          if (valid) {
            console.log('校验通过', this.supplierMaterialModel)
            this.dialogLoading = true
            if (this.is_edit) {
              edit(this.supplierMaterialModel).then(
                res => {
                  const { code, message } = res
                  if (code === 200) {
                    Message({ message, type: 'success', duration: 1000 })
                    this.getList()
                    this.dialogVisible = false
                  }
                  this.dialogLoading = false
                }
              ).catch(() => {
                this.dialogLoading = false
              })
            } else {

            }
          }
        })
      },
      closeDialog() {
        this.supplierMaterialModel = {
          id: null,
          supplier_id: null,
          material_texture_id: null,
          price: null
        }
        this.is_edit = false
      },
      remove(id) {
        if (this.dialogLoading) return false
        this.$confirm('确认要删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          dangerouslyUseHTMLString: true
        }).then(() => {
          this.dialogLoading = true
          remove({ id: id }).then(res => {
            const { code, message } = res
            if (code === 200) {
              Message({ message, type: 'success', duration: 1000 })
              this.getList()
            }
            this.dialogLoading = false
          })
        })
      }
    }
  }
</script>

<style scoped>
  .app-main {
    padding: 0 20px;
  }

  .search-box {
    margin-top: 10px;
  }

  .table-box {
    margin-bottom: 20px;
  }
</style>
